<template>
  <div id="body">
    <vue-particles
      :style="{height: '100vh'}"
      color="#dedede"
      :particle-opacity="0.7"
      :particles-number="100"
      shape-type="circle"
      :particle-size="4"
      lines-color="#dedede"
      :lines-width="1"
      :line-linked="true"
      :line-opacity="0.4"
      :lines-distance="150"
      :move-speed="5"
      :hover-effect="true"
      hover-mode="grab"
      :click-effect="true"
      click-mode="push"
    />
    <el-form ref="loginForm" :model="loginForm" class="login-form" label-position="left">
      <div :class="{test:lod,testtwo:lod2,zoomIn:info}" class="login animated ">
        <div class="login_title">
          <span class="title">动感小新</span>
        </div>
        <div class="login_fields login_title">
          <div class="login_fields__user">
            <div class="icon">
              <img alt="" src="./public/img/user_icon_copy.png">
            </div>
            <input ref="username" v-model="loginForm.username" name="login" placeholder="用户名" type="text" autocomplete="off">
            <div class="validation">
              <img alt="" src="./public/img/tick.png">
            </div>
          </div>
          <div class="login_fields__password">
            <div class="icon">
              <img alt="" src="./public/img/lock_icon_copy.png">
            </div>
            <input ref="password" v-model="loginForm.password" name="pwd" placeholder="密码" type="password" autocomplete="off">
            <div class="validation">
              <img alt="" src="./public/img/tick.png">
            </div>
          </div>

          <div class="login_fields__submit">
            <input type="button" value="登录" @click="login">
          </div>
        </div>
        <div class="success" />

      </div>
    </el-form>
    <div v-if="lod3" class="authent animated zoomIn">
      <div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
        <div class="loader-inner ball-clip-rotate-multiple">
          <div />
          <div />
          <div />
        </div>
      </div>
      <p class="title2">登陆中...</p>
    </div>
    <div v-if="lod4" class="authent animated zoomOut">
      <div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
        <div class="loader-inner ball-clip-rotate-multiple">
          <div />
          <div />
          <div />
        </div>
      </div>
      <p class="title2">登陆中...</p>
    </div>
    <div class="OverWindows" />
  </div>

</template>

<script>
import { getCompanyCode } from '@/api/user'

export default {
  name: 'Index2',
  data() {
    return {
      windowHeight: document.documentElement.clientHeight, // 实时屏幕高度,
      lod: false,
      lod2: false,
      lod3: false,
      lod4: false,
      loginForm: {
        username: '',
        password: ''
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {},
      info: true,
      Company: []

    }
  },

  mounted() {

  },
  created() {
    this.info = true
    this.get_name()
    setTimeout(function() {
      this.info = false
    }, 500)
  },
  methods: {
    get_name() {
      this.Company = JSON.parse(localStorage.getItem('Company'))
      // var company_code = this.$route.query.company_code ? this.$route.query.company_code : -1

      // getCompanyCode({ company_code: company_code }).then(res => {
      //   console.log(res)
      //   localStorage.setItem('Company', res.data)
      //   this.Company = res.data
      // }).catch(() => {
      //   alert('发生错误，请联系管理员。')
      // })
    },
    login() {
      this.lod = true
      var than = this
      setTimeout(function() {
        than.lod2 = true
        setTimeout(function() {
          than.lod3 = true
          setTimeout(function() {
            than.handleLogin()
          }, 300)
        }, 300)
      }, 300)
    },
    fh() {
      var than = this
      than.lod3 = false
      than.lod4 = true
      setTimeout(function() {
        than.lod4 = false
        than.lod2 = false
        setTimeout(function() {
          than.lod = false
        }, 300)
      }, 300)
    },

    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true

          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
              this.fh()
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

  }
}
</script>

<style>
  @import url("./public/css/demo.css");
  @import url("./public/css/loaders.css");
  @import url("./public/css/styles.css");
  @import url("./public/css/animate.min.css");
  body .login_fields input[type='text'], body .login_fields input[type='password']{
    width: 100%;
  }
  #body {
    -webkit-perspective: 800px;
            perspective: 800px;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    font-family: 'Gudea', sans-serif;

    background: #2d3a4b;
    /* Old browsers */
    /* FF3.6+ */

    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d3a4b ', endColorstr='#bb6dec',GradientType=1 );
    /* IE6-9 fallback on horizontal gradient */
  }

  @media all and (max-width:750px){
      .authent{
        width: 250px !important;
        height: 180px !important;
        bottom: 0px;
        top: 0px !important;
        right:0px !important;
        padding: 0px;
      }
      .title2{
        font-size: 20px;
      }
      .loader{
        margin-bottom: 20px;
      }
      .title2{
        line-height: 100px;
      }
  }
  @media all and (min-width:750px){

    body .login{
      width: 400px !important;
      height: 320px;
      padding-top: 70px;
    }
    .title{
      font-size: 40px;
      color: #fff !important;
    }
    .login_fields__submit{
      top: 35px;
    }
    .authent{
      width: 350px !important;
      height: 250px !important;
      bottom: 0px;
      top: 0px !important;
      right:0px !important;
    }
    .title2{
      font-size: 50px;
    }
    .ball-clip-rotate-multiple > div{
      height: 75px;
      width: 75px;
    }
    .ball-clip-rotate-multiple > div:last-child {
      width: 55px;
      height: 55px;
    }
    .loader{
      margin-bottom: 20px;
    }
    .title2{
      line-height: 100px;
    }
  }
  .el-notification__content p{
    color: red;
  }
</style>
